<template>
    <!-- 弹窗组件 -->
    <div class="dialog-box">
        <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增分组' : '编辑分组'" width="400" destroy-on-close>
            <el-form :model="formData" ref="formRef" :rules="rules" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="分组名称" prop="name">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>



            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="handleSubmit" color="#626aef">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, defineEmits, defineProps, defineExpose } from "vue";
import type { FormInstance, FormRules } from 'element-plus';
import api from "@/api";
import { dataType } from "@/utils/publicType";
import { ElMessage } from 'element-plus';
// 接收父组件传入的值
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    dialogType: {
        type: String,
        default: 'add'
    },
    dialogRow: {
        type: Object,
        default: () => ({})
    }
});

const emit = defineEmits(['update:dialogVisible', 'submit', 'cancel']);

// 表单ref
const formRef = ref<FormInstance>();

// 表单数据
const formData = reactive({
    name: '',

});

// 表单验证规则
const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],

});




// 监听对话框显示状态
const dialogVisible = ref(props.dialogVisible);
watch(() => props.dialogVisible, (val) => {
    dialogVisible.value = val;
    if (val && props.dialogType === 'edit' && props.dialogRow) {
        // 编辑模式下填充表单数据
        Object.keys(formData).forEach(key => {
            if (key in props.dialogRow) {
                formData[key] = props.dialogRow[key];
            }
        });
    } else if (val && props.dialogType === 'add') {
        // 新增模式重置表单
        resetForm();
    }
});

// 监听对话框内部状态变化并同步到父组件
watch(dialogVisible, (val) => {
    emit('update:dialogVisible', val);
});

// 重置表单
const resetForm = () => {
    formRef.value?.resetFields();


};

// 取消按钮
const handleCancel = () => {
    dialogVisible.value = false;
    emit('cancel');
};

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return;
    await formRef.value.validate(async (valid, fields) => {
        if (valid) {
            let res: dataType;
            if(props.dialogType === 'add'){
                res = await api.product.product_group_add({
                    name: formData.name,
                })
            }else{
                res = await api.product.product_group_edit({
                    id: props.dialogRow.id,
                    name: formData.name,
                })
            }
            if (res.code == 200) {
                ElMessage.success(res.message);
                setTimeout(() => {
                    dialogVisible.value = false;
                    emit('submit', formData);
                }, 100);
            } else {
                ElMessage.error(res.message);
            }
        }
    });
};




</script>

<style lang="scss" scoped>
.dialog-box {


    .upload-container {
        .upload-tip {
            font-size: 12px;
            color: #999;
        }

        .image-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            gap: 10px;

            .upload-box {
                width: 100px;
                height: 100px;
                border: 1px dashed #d9d9d9;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                &:hover {
                    border-color: #409eff;
                }

                .el-icon {
                    font-size: 24px;
                    color: #8c939d;
                    margin-bottom: 5px;
                }

                span {
                    font-size: 12px;
                    color: #8c939d;
                }
            }

            .image-item {
                width: 100px;
                height: 100px;
                position: relative;
                border-radius: 4px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .image-actions {
                    position: absolute;
                    top: 0;
                    right: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    color: #fff;
                    padding: 2px;
                    border-radius: 0 0 0 4px;
                    cursor: pointer;
                }
            }
        }
    }
}

::v-deep .el-dialog {
    --el-dialog-padding-primary: 0px;
}

::v-deep .el-dialog__header {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}

::v-deep .dialog-footer {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #000;
}

::v-deep .el-dialog__body {
    padding: 20px 10px;
}
</style>
